<template>
  <view class="container">
    <image class="back-img" src="../../static/return.png" :style="{top: statusBarHeight + 'px'}" mode="widthFix"
      @click="back"></image>
    <swiper class="swiper" @change="change" circular :indicator-dots="false" duration="250" :vertical="true">
      <swiper-item v-for="(item,index) in list" :key="index">
        <view class="swiper-item uni-bg-red" v-clock :style="{'backgroundImage':'url('+ item.images +')' }"
          @click="changeAvatar(item)">
          <!-- <image :src="item.images" mode="widthFix" show-menu-by-longpress></image> -->
        </view>
      </swiper-item>
    </swiper>
    <!-- <div class="box">
      <ul class="minbox">
        <li v-for="(item,index) in 6" :style="{'backgroundImage':'url('+image+')' }"></li>
      </ul>
    </div> -->
    <loading v-if="isLoading"></loading>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: true,
        page: 1,
        list: [],
        image: '',
        userName: '',
        num: 0,
        statusBarHeight: 0,
        displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
        originIndex: 0, // 记录源数据的下标
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 10;
    },
    onLoad() {
      this.userName = uni.getStorageSync('userInfo').nickName;
      // 获取图片列表数据
      this.getImageList()
    },
    // watch: {
    //   num(val) {
    //     this.image = this.list[val].images
    //   }
    // },
    methods: {
      // 添加手机壁纸
      phoneUplate(title, image) {
        this.$uniCloud('appimage', {
          type: 'add',
          name: title,
          images: image,
        }).then(res => {
          uni.showToast({
            title: res.result.msg
          })
        })
      },
      // 添加电脑壁纸
      pcUplate(title, image) {
        this.$uniCloud('pcimage', {
          type: 'add',
          name: title,
          images: image,
        }).then(res => {
          uni.showToast({
            title: '添加成功'
          })
        }).catch(err => {
          uni.showToast({
            title: '图片已存在请选择其他图片'
          })
        })
      },
      // 选择操作
      changeAvatar(item) {
        var _this = this;
        if (this.userName == '你瞅啥') {
          uni.showActionSheet({
            // itemList按钮的文字接受的是数组
            itemList: ["设置为手机壁纸", "设置为电脑壁纸", "删除该壁纸", "查看该图片"],
            success(e) {
              if (e.tapIndex == 0) {
                _this.phoneUplate(item.name, item.images)
                // 手机壁纸
              } else if (e.tapIndex == 1) {
                // 电脑壁纸
                _this.pcUplate(item.name, item.images)
              } else if (e.tapIndex == 2) {
                _this.playBtn(item.name)
              } else if (e.tapIndex == 3) {
                uni.previewImage({
                  urls: [item.images]
                });
              }

              console.log(e.tapIndex, 1111)
            }
          })
        } else {
          uni.showActionSheet({
            // itemList按钮的文字接受的是数组
            itemList: ["查看图片"],
            success(e) {
              if (e.tapIndex == 0) {
                uni.previewImage({
                  urls: [item.images]
                });
              }
              console.log(e.tapIndex, 1111)
            }
          })
        }

      },
      // 删除
      playBtn(title) {
        this.$uniCloud('imagesBase', {
          type: 'delete',
          name: title,
        }).then(res => {
          uni.showToast({
            title: '删除成功'
          })
        })
      },
      //
      initSwiperData(originIndex = this.originIndex) {
        const originListLength = this.list.length; // 源数据长度
        const displayList = [];
        displayList[this.displayIndex] = this.list[originIndex];
        displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
          this.list[
            originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
          ];
        displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
          this.list[
            originIndex + 1 == originListLength ? 0 : originIndex + 1
          ];
        this.displaySwiperList = displayList;
      },
      change(event) {
        this.num = event.detail.current;
        this.image = this.list[this.num].images

        const {
          current
        } = event.detail;
        const originListLength = this.list.length; // 源数据长度
        // =============向后==========
        if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
          this.originIndex =
            this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
          this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
          this.initSwiperData(this.originIndex);
        }
        // ======如果两者的差为-2或者1则是向前滑动============
        else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
          this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
          this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
          this.initSwiperData(this.originIndex);
        }
      },
      // 获取图片列表
      getImageList(index) {
        this.$uniCloud('imagesBase', {
          type: 'get',
        }).then(res => {
          if (res.result) {
            this.list = res.result[1].data.reverse()
            setTimeout(() => {
              this.isLoading = false;
            }, 1000)
            // this.image = this.list[0].images
            this.initSwiperData()
          }
        })
      }
    }
  }
</script>

<style lang="less">
  [v-clock] {
    display: none;
  }

  .container {
    width: 100%;
    height: 100vh;

    .back-img {
      position: absolute;
      left: 30rpx;
      width: 45rpx;
      height: 45rpx;
      z-index: 999;
    }

    .swiper {
      width: 100%;
      height: 100vh;

      .swiper-item {
        width: 100%;
        height: 100vh;
        background-color: black;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 100%;
          height: 300rpx;
        }
      }
    }
  }
</style>
<style>
  li {
    list-style: none;
  }

  .box {
    position: absolute;
    right: 15rpx;
    top: 200px;
    width: 50rpx;
    height: 50rpx;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(13deg);
    -webkit-animation: move 3s linear infinite;
  }

  .minbox {
    width: 25px;
    height: 25px;
    position: absolute;

    -webkit-transform-style: preserve-3d;
  }

  .minbox li {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .minbox li:nth-child(1) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateZ(12.5px);
  }

  .minbox li:nth-child(2) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: rotateX(180deg) translateZ(12.5px);
  }

  .minbox li:nth-child(3) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: rotateX(-90deg) translateZ(12.5px);
  }

  .minbox li:nth-child(4) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: rotateX(90deg) translateZ(12.5px);
  }

  .minbox li:nth-child(5) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: rotateY(-90deg) translateZ(12.5px);
  }

  .minbox li:nth-child(6) {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: rotateY(90deg) translateZ(12.5px);
  }

  @keyframes move {
    0% {
      -webkit-transform: rotateX(13deg) rotateY(0deg);
    }

    100% {
      -webkit-transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
